<template>
    <div class="container">
      <div class="container-head flex_btw">
        <div class="head-title flex_x">
          <img class="head-icon" src="@/assets/images/data.png" alt="" />
          <span>数据配置-店铺</span>
        </div>
        <div class="flex_x">
          <el-input
            class="mr20"
            v-model="params"
            style="width: 240px"
            placeholder="请输入编号或名称"
          >
          </el-input>
          <el-button type="primary">搜索</el-button>
          <el-button type="primary">模板下载</el-button>
          <el-button type="primary">导入</el-button>
          <el-button
            type="primary"
            @click="
              isAdd = true
            "
            >新增</el-button
          >
          <el-button type="danger">删除</el-button>
        </div>
      </div>
      <div class="list_con" v-loading="loading">
        <el-table
          :data="tableData"
          v-resize="{ bottomOffset: 120 }"
          ref="tableRef"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          header-cell-class-name="table_head_s"
          cell-class-name="table_cell_s"
          :loading="isLoading"
        >
          <el-table-column type="selection" width="100" />
          <el-table-column prop="date" label="编号"> </el-table-column>
          <el-table-column prop="name" label="品牌名称"> </el-table-column>
          <el-table-column prop="address" label="备注"> </el-table-column>
          <el-table-column prop="address" label="修改人"> </el-table-column>
          <el-table-column prop="address" label="修改时间"> </el-table-column>
          <el-table-column prop="address" label="操作" width="150">
            <template #default="scope">
              <el-button type="primary" link>编辑</el-button>
              <el-button type="primary" link>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="list_page flex_c">
          <el-pagination
          v-model:current-page="pagination.current"
          v-model:page-size="pagination.size"
          :page-sizes="pagination.sizeOption"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          :pager-count="5"
          @size-change="pagination.onSizeChange"
          @current-change="pagination.onCurrentChange"
        />
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
 import { useRouter } from "vue-router";
import dialogAdd from "./components/add.vue";
import { login } from "@/api/common";
import { useTable } from "@/hooks/pageList";
  
  interface User {
    date: string;
    name: string;
    address: string;
  }
  
  const router = useRouter();
  
  const params = ref("");
  const [tableData, refresh, loading, pagination] = useTable(
  login,
  {},
  {
    immediate: true,
  }
);
  const multipleTableRef = ref();
  const multipleSelection = ref<User[]>([]);
  const toggleSelection = (rows?: User[]) => {
    if (rows) {
      rows.forEach((row) => {
        multipleTableRef.value!.toggleRowSelection(row, undefined);
      });
    } else {
      multipleTableRef.value!.clearSelection();
    }
  };
  const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val;
  };
  const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`);
  };
  const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`);
  };
  </script>
  